//由于我们的webpack 是基于node构建的,所以webpack的配置文件中,任何合法的node代码都是合法的
let path = require('path')
let html = require('html-webpack-plugin')  //在内存生成html页面 同时吧打包文件注入进去
//当以命令行形式运行webpack 或者 webpack-dev-server
//的时候,工具会发现我们没有提供要打包的入口文件和出口文件 此时,他会检查根目录的配置文件,并读取这个文件
//就拿到了导出的这个配置对象然后根据这个对象,进行打包构建
module.exports = {
entry:path.join(__dirname,'./src/main.js'),
  output:{
  path:path.join(__dirname,"./dist/"),
    filename:"main.js"
  },
  plugins:[ //所有webpack 插件配置节点
    new html({
      template:path.join(__dirname,'./src/index.html'),
      filename:'index.html'
    })
  ],
  module:{  //配置所有第三方loader 模块的
    rules:[ //第三方模块匹配规范
      {test:/\.css$/,use:['style-loader','css-loader']},  //处理css文件的模块
      {test:/\.less/,use:['style-loader','css-loader','less-loader']},
      {test:/\.scss/,use:['style-loader','css-loader','sass-loader']},
      {test:/\.(jpg|png|gif|bpm|jpeg)$/,use:"url-loader?[name].[ext]"}, //如果只
      {test:/\.(eot|ttf|svg|woff|woff2)$/,use:'url-loader'},  //处理字体文件loader 配置下
      // 需要一个loader 不需要用数组方式
      //直接一个字符串就好了
      //limit 给定的值 是图片的大小,单位是byte 如果我们引用的图片大于或者等于limit
      //值 则不会转为base64 如果小于则会被转换成base64
      //  {test:/\.scss/,use:['style-loader','css-loader,','sass-loader']}
      //[hash:8] 截取前八位hash值
      //[name].[ext] //原来的名字输出
      //[hash:8]-[name].[ext]
      {test:/\.js$/,use:"babel-loader",exclude:/node_modules/},
      //这个是配置babel 来转换高级的语法
      {test:/\.vue$/,use:"vue-loader"}
      //处理.vue 文件的loader
    ]
  },
  resolve:{
  alias:{ //修改vue被导入时候包的路径
        //"vue$":"vue/dist/vue.js"
     }
  }
}